<template>
    <div class="workcount">
        <div class="left">
            <el-input v-model="inputvalue" @blur="connectInput($event)" placeholder="请输入学校名称" class="leftinput" />
            <!-- <el-icon><Plus /></el-icon> -->
            <!-- <el-icon><Minus /></el-icon> -->

            <el-tree :data="data" v-model="treeflag" icon="Plus" default-expand-all="treeflag" ref="menuTree" />
        </div>
        <div class="workcounttable">

            <div class="right">
                <!-- 封装的日历，渲染表格，查看考勤 -->
                <div class="top">
                    <div class="block">
                        考勤日期：
                        <el-date-picker v-model="value1" type="day" placeholder="选择日期" value-format="YYYY-MM-DD"
                            @blur="value1blur" />
                    </div>
                    <!-- <div class="topright">
                        <el-button class="btn-seal">
                            <el-icon>
                                <FolderAdd />
                            </el-icon> &nbsp;&nbsp;导出
                        </el-button>
                    </div> -->
                </div>
                <div class="bottom">
                    <!-- stripe :row-style="{background:'#F7F7F7'}" -->
                    <el-table :data="tableData" border style="width: 100%" height="500" highlight-current-row="true" stripe
                        :row-style="{ backgroundColor: '#FFFFFF' }"
                        :header-cell-style="{ background: '#1EC695', color: '#ffffff' }">
                        <el-table-column label="年级" width="150" align="center">
                            <template #default="scope">
                                {{ scope.$index + 1 }}
                                <!-- {{ scope.row.student.classes.gradeId}}年级{{ scope.row.student.classes.classId}}班 -->

                            </template>
                        </el-table-column>
                        <el-table-column prop="arriving" label="应到人数" width="180" align="center">
                            <template #default="scope">
                                {{ scope.row.arriving }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="practical" label="实到人数" width="180" align="center">
                            <template #default="scope">
                                {{ scope.row.practical }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="latecomer" label="迟到" width="180" align="center">
                            <template #default="scope">
                                {{ scope.row.latecomer }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="absenteeism" label="缺勤" width="180" align="center">
                            <template #default="scope">
                                {{ scope.row.absenteeism }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="attendance" label="出勤率" width="180" align="center">
                            <template #default="scope">
                                {{ (scope.row.practical / scope.row.arriving) * 100 + '%' }}
                            </template>
                        </el-table-column>
                    </el-table>


                    <!-- 分页按钮 -->
                    <!-- <div class="bottom2" style="float: right; margin-right: 40px; background-color: white;">
                        <div class="demo-pagination-block">
                            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                                :page-sizes="[10, 20, 30, 40]" :disabled="disabled" :background="background"
                                layout="  prev, pager, next,total,jumper,sizes," :total="50" prev-text="上一页"
                                next-text="下一页" />
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import service from '@/api'
import { ref, onMounted } from 'vue'
import { ElNotification } from "element-plus";
import 'element-plus/es/components/notification/style/css'
let inputvalue = ref('')
let treeflag = ref()
let e = ref()
let menuTree = ref()
let dataId = ref('')
let arrclassname = ref()
let tableData = ref([])
let value1 = ref()
// 学校
//思路： input输入框获取实时监听的输入内容，发起请求，获取所有学校是个数组对象，继续遍历获取所有学校对象，学校遍历获取所有name学校名，获取所有学校名，判断是否和 input输入相同，有渲染，没有提示没这学校
const connectInput = async (event: any) => {
    if (event) {
        // console.log(event.target.value);
        // 分页获取学校数据
        let res1 = await service.xss.school_getSchoolByPage({ cp: 1, ps: 10 })
        // console.log(res1.data.data.data);
        let schoolarr = res1.data.data.data
        // console.log(inputvalue.value);
        schoolarr.forEach((arr: any) => {
            // 拿到学校名了
            // console.log(arr.name);
            if (arr.name == inputvalue.value) {
                dataId.value = arr.name
                ElNotification.success({ message: '获取成功' })
            }
            // Object.values(arr).forEach(item => {
            //     console.log(item.name); 

            // })
        });
    }
}
onMounted(async () => {
    // 分页获取所有班级 里边有班级所属学校
    let res2 = await service.xss.classes_getClassesByPage({ cp: 1, ps: 10 })
    let classschool = res2.data.data.date
    let arrclasschool: any = []
    classschool.forEach((item: any, index: any) => {
        // console.log(item, index);
        let arritem = item.gradeId + "年级" + item.classId + "班"
        arrclasschool.push(arritem)
    })
    arrclassname.value = arrclasschool
    // 班级做成数组成功了
    // console.log(arrclassname.value);

    // 出勤统计
    let res3 = await service.xss.attendance_attendanceStatistics({ time: "2023-04-08" })
    // console.log(res3);
    tableData.value = res3.data.data
    // console.log(tableData.value);
})
// 失焦获取日期
const value1blur = async () => {

    // 出勤统计
    // console.log(value1.value);
    let res3 = await service.xss.attendance_attendanceStatistics({ time: value1.value })
    // console.log(res3);
    tableData.value = res3.data.data
}

//  这个应该后端提供，我存到pinia中，然后组件渲染，或者有id父传子
const data = [
    {
        id: '1',
        label: dataId,
        children: [
            {
                id: '1-1',
                label: '三年级',
                children: [
                    {
                        id: '1-1-1',
                        label: arrclassname,
                    },
                    {
                        id: '1-1-2',
                        label: arrclassname,
                    },
                ],
            },
        ],
    }
]
</script>

<style>
:deep()li.is-active {
    background-color: #1EC695;
    color: white;
}

.workcount {
    display: flex;
    background-color: rgb(247, 247, 247);
}

.workcount .left {
    width: 150px;
    margin: 30px 0 30px 30px;
    height: 100%;
    background-color: white;
    padding: 15px;
    height: 562px;
}

.workcount .leftinput {
    width: 150px;
}

/* tree点击变蓝色 */
.el-tree-node:focus>.el-tree-node__content {
    background-color: #fff;
    color: #409eff;
}

/* 表格 */
.workcounttable {
    padding: 30px;
    background-color: rgb(247, 247, 247);
}

.top {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 20px 40px;
}

.bottom {
    background-color: white;
    padding: 10px 40px;
}
</style>